<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->

    <ui5-notification-list>
        <ui5-li-notification
            id="firstNotificationListItem"
            title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
            state="Positive"
            importance="Important"
            show-close>
            <ui5-avatar size="XS" slot="avatar">
                <img src="../assets/images/avatars/woman_avatar_1.png">
            </ui5-avatar>
            <span slot="footnotes">Monique Legrand</span>
            <span slot="footnotes">2 Days</span>
            And with a very long description - Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec
            elementum
            lectus turpis at nunc.
            <ui5-menu id="menuWithActions"  slot="menu">
                <ui5-menu-item icon="accept" text="Accept"></ui5-menu-item>
                <ui5-menu-item icon="message-error" text="Reject"></ui5-menu-item>
            </ui5-menu>
        </ui5-li-notification>
        <ui5-li-notification show-close title-text="New order (#2526) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc." state="Critical">
            <ui5-avatar size="XS" slot="avatar">
                <img src="../assets/images/avatars/man_avatar_1.png">
            </ui5-avatar>
            <span slot="footnotes">Alain Chevalier</span>
            <span slot="footnotes">2 Days</span>
            And with a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
        </ui5-li-notification>
        <ui5-li-notification show-close title-text="New order (#2525) With a short title" state="Information" read>
            <ui5-avatar size="XS" slot="avatar">
                <img src="../assets/images/avatars/man_avatar_2.png">
            </ui5-avatar>
            <span slot="footnotes">John Doe</span>
            <span slot="footnotes">2 Days</span>
            And with a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
        </ui5-li-notification>
    </ui5-notification-list>
    <ui5-toast id="wcToast" duration="2000"></ui5-toast>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
